<template>
  <div>
     <Button style="margin-bottom:20px" type="primary" @click.stop="modal1 = true">添加</Button>
     <Button style="margin-bottom:20px; background:red;" type="primary" @click.stop='deleteBox'>删除多个</Button>
     <Button style="margin-bottom:20px;float:right;" @click="search" type="primary" icon="ios-search" >搜索</Button>
    <Input  v-model="value" placeholder="输入您要搜索的内容" style="float:right; width:200px; margin-bottom:20px;margin-right:20px;" class="searchbox"/>
    <Modal
        footer-hide
        v-model    = "modal1"
        title      = "请输入您的信息"
        @on-ok     = "ok"
        @on-cancel = "cancel">
        <Form ref="formValidate" :model="formValidate" :rules="ruleValidate" :label-width="80">
        <FormItem label="姓名" prop="name">
            <Input v-model="formValidate.name" placeholder="请输入"></Input>
        </FormItem>
        <FormItem label="性别" prop="sex">
            <RadioGroup v-model="formValidate.sex">
                <Radio label="男">男</Radio>
                <Radio label="女">女</Radio>
            </RadioGroup>
        </FormItem>
        <FormItem label="年龄" prop="age">
            <Input v-model="formValidate.age"  placeholder="请输入"></Input>
        </FormItem>
        <FormItem label="地址" prop="name">
            <Input v-model="formValidate.address" placeholder="请输入"></Input>
        </FormItem>
        <FormItem label="电话" prop="Tel">
          <Input v-model="formValidate.Tel" placeholder="请输入手机号"></Input>
        </FormItem>
           <FormItem label="QQ" prop="QQ">
          <Input v-model="formValidate.QQ" placeholder="请输入QQ"></Input>
        </FormItem>
        <FormItem label="学历" prop="education">
            <Input v-model="formValidate.education" placeholder="请输入"></Input>
        </FormItem>
        <FormItem label="兴趣爱好" prop="hobby">
            <Input v-model="formValidate.hobby" placeholder="请输入"></Input>
        </FormItem>
        <FormItem label="身份证" prop="Idcard">
            <Input v-model="formValidate.Idcard" placeholder="请输入"></Input>
        </FormItem>
        <FormItem label="电话" prop="Tel">
            <Input v-model="formValidate.Tel" placeholder="请输入"></Input>
        </FormItem>


        <FormItem label="邮件" prop="email">
            <Input v-model="formValidate.email" placeholder="请输入"></Input>
        </FormItem>
        <FormItem>
            <Button type="primary" @click="handleSubmit(formValidate)">确认</Button>
            <Button @click="handleReset('formValidate')" style="margin-left: 8px">取消</Button>
        </FormItem>
    </Form>

    </Modal>

     <Table border :columns="columns7" :data="data" style="height:100%; width:100%;" @on-selection-change='onSelect'></Table>

       <Page :total="total" :page-size="limit" style="margin:20px 0 20px 0" @on-page-size-change="onChangePagesize" :page-size-opts="[5,10,15,20]" @on-change="onChangePage" show-sizer />
  </div>
</template>
<script>
    export default {
        data () {
            return {
                value       : '',
                formValidate: {
                    name     : '',
                    sex      : '',
                    age      : '',
                    address  : '',
                    education: '',
                    hobby    : '',
                    Idcard   : '',
                    Tel      : '',
                    email    : '',
                },
                ruleValidate: {
                    name: [
                        { required: true, message: '您输入有误', trigger: 'blur' }
                    ],
                    mail: [
                        { required: true, message: '您输入有误', trigger: 'blur' },
                        { type: 'email', message: 'Incorrect email format', trigger: 'blur' }
                    ],
                    city: [
                        { required: true, message: 'Please select the city', trigger: 'change' }
                    ],
                    gender: [
                        { required: true, message: 'Please select gender', trigger: 'change' }
                    ],
                    interest: [
                        { required: true, type: 'array', min: 1, message: 'Choose at least one hobby', trigger: 'change' },
                        { type: 'array', max: 2, message: 'Choose two hobbies at best', trigger: 'change' }
                    ],
                    date: [
                        { required: true, type: 'date', message: 'Please select the date', trigger: 'change' }
                    ],
                    time: [
                        { required: true, type: 'string', message: 'Please select time', trigger: 'change' }
                    ],
                    desc: [
                        { required: true, message: 'Please enter a personal introduction', trigger: 'blur' },
                        { type: 'string', min: 20, message: 'Introduce no less than 20 words', trigger: 'blur' }
                    ]
                },
                modal1  : false,
                columns7: [
                    {
                        type : 'selection',
                        width: 50,
                    },
                    {

                        title: '姓名',
                        key  : 'name',
                        width: 90,

                    },
                    {
                        title: '性别',
                        key  : 'sex',
                        width: 80

                    },
                    {
                        title: '年龄',
                        key  : 'age',
                        width: 80
                    },
                    {
                        title: '地址',
                        key  : 'address',
                        width: 100
                    },
                    {
                        title: '学历',
                        key  : 'education',
                        width: 120
                    },
                    {
                        title: '兴趣爱好',
                        key  : 'hobby',
                        size : 'large',
                        width: 120

                    },
                    {
                        title: '身份证',
                        key  : 'Idcard',
                        width: 160,
                    },
                    {
                        title: '电话',
                        key  : 'Tel',
                        width: 120
                    },
                    {
                        title: '邮箱',
                        key  : 'email',
                        width: 160
                    },
                    {
                        title : '操作',
                        key   : 'action',
                        width : 150,
                        align : 'center',
                        render: (h, params) => {
                            return h('div', [
                                h('Button', {
                                    props: {
                                        type: 'primary',
                                        size: 'small'
                                    },
                                    style: {
                                        marginRight: '5px'
                                    },
                                    on: {
                                        click: () => {
                                            this.show(params.index)
                                        }
                                    }
                                }, '修改'),
                                h('Button', {
                                    props: {
                                        type: 'error',
                                        size: 'small'
                                    },
                                    on: {
                                        click: () => {
                                            this.remove(params.index)
                                            // console.log(1)
                                            //this.remove();
                                        }
                                    }
                                }, '删除')
                            ]);
                        }
                    }
                ],
                data : [],
                page : 0,
                total: 5,
                limit: 5,
                arr  : [],
                ids  : [],
            }
        },
        methods: {
            onSelect(selections){//复选框
                var ids = []
                for(var i=0;i<selections.length;i++){
                    ids.push(selections[i]._id)

                }
                this.ids = ids.toString()
                    console.log(this.ids)

            },
            deleteBox(){//删除多个
                // var aa=this.data[index]._id;
                // console.log(this.data)
                //console.log(this.ids)
                this.axios({
                    url   : `${this.$store.getters.globalUrl}users/data/removes`,
                    method: 'post',                                                 //删除
                    data  : {
                        ids: this.ids
                    },
                }).then(res=>{
                    console.log(res)
                    this.getdata()
                })
            },
            search(){//搜索
             console.log(`${this.$store.getters.globalUrl}`)
            //  console.log(`${this.globalUrl}`)
                this.axios({
                    url   : `${this.$store.getters.globalUrl}users/list`,
                    method: 'post',
                }).then(res=>{
                    var list = res.data.rows
                    list.forEach(item=>{
                        if(item.name.indexOf(this.value)!=-1){
                            console.log(item)
                            this.arr.push(item)
                        }
                    })
                    this.data = this.arr
                })


            },
            handleSubmit(a){
                    var bb     = this.formValidate
                    var formID = this.formValidate._id
                if(formID){
                    this.axios({
                        url   : `${this.$store.getters.globalUrl}users/data/${formID}`,
                        method: 'put',
                        data  : this.formValidate
                    }).then(res=>{
                        this.modal1 = false,
                        this.getdata()
                    })
                }else{
                    this.axios({
                        url   : `${this.$store.getters.globalUrl}users/data`,
                        method: 'post',
                        data  : this.formValidate
                    }).then(res=>{
                        console.log(res)
                        this.modal1 = false,
                        this.getdata()
                    })
                }
            },
            handleReset(){
                this.$Message.info('对话框的退出');
                this.modal1 = false
            },
            show (index) {//修改
                var aa = this.data[index]._id;
                console.log(this.data[index]._id)
                this.modal1 = true;
                this.axios({
                    url   : `${this.$store.getters.globalUrl}users/data/${aa}`,
                    method: 'put',                                                //修改
                }).then(res=>{
                    console.log(res.data)
                    this.formValidate = res.data;
                    this.getdata()
                })
            },
            remove (index) {
               var aa = this.data[index]._id;
               console.log(this.data)
                //this.data.splice(index, 1);
                this.axios({
                    url   : `${this.$store.getters.globalUrl}users/data/${aa}`,
                    method: 'delete',                                             //删除
                }).then(res=>{
                    console.log(res)
                    this.getdata()
                })
            },
            getdata(){//获取接口
              this.axios({
                url   : `${this.$store.getters.globalUrl}users/list`,
                method: 'post',
              }).then(res=>{
                this.data = res.data.rows;
                // console.log(res.data.rows)
                this.total = res.data.total;

              })
            },
            onChangePage(page){
              this.axios({
                url   : `${this.$store.getters.globalUrl}users/list`,
                method: 'post',
                data  : {
                  page: page
                }
              }) .then(res=>{
                  this.data  = res.data.rows;
                  this.total = res.data.total;
              })
            },
            onChangePagesize(rows){
              this.axios({
                 url   : `${this.$store.getters.globalUrl}users/list`,
                 method: 'post',
                 data  : {
                  rows: rows
                }
              }) .then(res=>{
                  this.limit = res.data.limit;
                  console.log(res)
                   this.data  = res.data.rows;
                   this.total = res.data.total;
              })
            }
        },
        mounted() {
          this.getdata()
        },

    }
</script>
<style>

</style>

